<template>
    
    <div class="chennel unified-bg-white">
        <div class="chennel-item  unified-cursor-default "
            v-for="(navigationItem,index) in list" :key="index"
            @click="click(index)"
            :class="{'chennel-int-checked':index == select}">
            <span class="chennel-text">
                {{navigationItem.name}}
            </span>
        </div>
    </div>
    
</template>

<script>
    
    export default {
        props:{
            list:{  // 菜单数据    [ {name:"菜单名称"}]
                type:Array,
                default(){
                    return []
                }
            },
            select:{
                type:Number,
                default:1
            }
        },
        methods:{
            // 左侧菜单被单机
            click(index) {
               this.$emit('change',index)
            }
        }
        
    }
    
</script>

<style scoped="scoped">
    
    .chennel {
        width: 190px;
        background-color: #fff;
        border-radius: 10px;
        height: 100%;
        display: block;
        margin-right: 20px;
        overflow: hidden;
    }
    .chennel-item {
        height: 55px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #2C3E50;
        padding: 0px 15px;
        text-decoration: none;
        transition: all .1s linear;
    }
    
    .chennel-int {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #2D3236;
        /* box-shadow: 0px 0px 6px #fff; */
        color: #fff;
        line-height: 20px;
        text-align: center;
        font-size: 8px;
        margin-right: 8px;
    }
    
    .chennel-int-checked {
        position: relative;
        background-color: #2269F3;
        color: #fff;
    }
    
    
    .chennel-text {
        flex: 1;
        /* color: #fff; */
        font-size: 10px;
        letter-spacing: 1px;
    }
    
    .chennel-status {
        font-size: 8px;
        color: #fff;
    }
</style>
